<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>城市数据</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../views/layui/css/layui.css" media="all">
    <!--[if lt IE 9]>
    <script src="__CSS__/html5shiv.min.js"></script>
    <script src="__CSS__/respond.min.js"></script>
    <![endif]-->
    <style>
        ol li a{
            color:#fff
        }
        dl>a>.layui-nav-more{
            display: none;
        }
        .layui-input-block{
            margin-left: 150px;
        }
        .layui-form-label{
            width: 120px;
        }
        .ddal {
            content: '';
            width: 0;
            height: 0;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent;
            overflow: hidden;
            cursor: pointer;
            transition: all .2s;
            -webkit-transition: all .2s;
            position: absolute;
            top: 50%;
            right: 3px;
            margin-top: -3px;
            border-width: 6px;
            border-top-color: rgba(255,255,255,.7);
        }
        .layui-layout-admin .layui-body{
            top:0 !important;
        }
        .layui-layout-admin .layui-side{
            top:0 !important;
        }
        .logo{
            width: 50px;
            display: inline-block;
            height: 21px;
        }
    </style>
</head>
<body>
    <div class="layui-layout layui-layout-admin">
        <!--侧边栏-->
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree">
                    <li class="layui-nav-item layui-nav-title" style="    display: flex;align-items: center;"><img class="logo" src="./views/img/logo.png" alt=""><a>管理菜单</a></li>
                    <li class="layui-nav-item "><a href="/index">产品信息</a></li>
                    <li class="layui-nav-item layui-this"><a href="javascript:;">城市数据</a></li>
                    <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
                </ul>
            </div>
        </div>
        <div class="layui-body">
            <!--tab标签-->
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">数据列表</li>
                </ul>
                <form class="layui-form layui-form-pane" action="" >
                     <div class="layui-inline">
                        <label class="layui-form-label">城市</label>
                        <div class="layui-input-inline">
                            <select name="city">
                                <option value="" data-cityzh="" >全部</option>
                                <option value="Beijing" data-cityzh="北京" >北京</option>
                                <option value="Tianjin" data-cityzh="天津">天津</option>
                                <option value="Heilongjiang" data-cityzh="黑龙江">黑龙江</option>
                                <option value="Jilin" data-cityzh="吉林" >吉林</option>
                                <option value="Liaoning" data-cityzh="辽宁" >辽宁</option>
                                <option value="Neimenggu" data-cityzh="内蒙古" >内蒙古</option>
                                <option value="Hebei" data-cityzh="河北" >河北</option>
                                <option value="Shanxi" data-cityzh="山西" >山西</option>
                                <option value="Shaanxi" data-cityzh="陕西" >陕西</option>
                                <option value="Ningxia" data-cityzh="宁夏" >宁夏</option>
                                <option value="Gansu" data-cityzh="甘肃" >甘肃</option>
                                <option value="Qinghai" data-cityzh="青海" >青海</option>
                                <option value="Xizang" data-cityzh="西藏" >西藏</option>
                                <option value="Xinjiang" data-cityzh="新疆" >新疆</option>
                                <option value="Shandong" data-cityzh="山东" >山东</option>
                                <option value="Henan" data-cityzh="河南" >河南</option>
                                <option value="Jiangsu" data-cityzh="江苏" >江苏</option>
                                <option value="Shanghai" data-cityzh="上海" >上海</option>
                                <option value="Zhejiang" data-cityzh="浙江" >浙江</option>
                                <option value="Anhui" data-cityzh="安徽" >安徽</option>
                                <option value="Hubei" data-cityzh="湖北" >湖北</option>
                                <option value="Jiangxi" data-cityzh="江西" >江西</option>
                                <option value="Fujian" data-cityzh="福建" >福建</option>
                                <option value="Yunnan" data-cityzh="云南" >云南</option>
                                <option value="Sichuan" data-cityzh="四川" >四川</option>
                                <option value="Chongqing" data-cityzh="重庆" >重庆</option>
                                <option value="Guizhou" data-cityzh="贵州" >贵州</option>
                                <option value="Hunan" data-cityzh="湖南" >湖南</option>
                                <option value="Guangxi" data-cityzh="广西" >广西</option>
                                <option value="Guangdong" data-cityzh="广东" >广东</option>
                                <option value="Hainan" data-cityzh="海南" >海南</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">产品</label>
                        <div class="layui-input-inline">
                            <select name="pid">
                                <option value="" >全部</option>
                                 {{#each list}}
                                    <option value="{{this._id}}" >{{this.title}}</option>
                                 {{/each}}
                            </select>
                        </div>
                    </div>
                  
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn"  lay-submit lay-filter="data-search-btn">搜索</button>
                    </div>

                </form>
                <div class="layui-tab-content" style="padding-top:0 ;">
                    <table id="test" lay-filter="test"></table>
                    <script type="text/html" id="toolbarDemo">
                        <div class="layui-btn-container">
                          <button class="layui-btn layui-btn-sm layui-bg-blue" id="reloadTest">
                            刷新
                          </button>
                          <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="add">
                            添加
                          </button>
                        </div>
                      </script>
                </div>
            </div>
        </div>
    
    </div>
<script type="text/html" id="content">
        <form class="layui-form" >
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-block" style="color: red;">
                    需要换行的地方请添加`&lt;br/&gt;`
                </div>
              </div>
              
             <div class="layui-form-item">
              <label class="layui-form-label">选择城市</label>
              <div class="layui-input-block">
                   <select name="city" lay-filter="city" lay-verify="required" id="citySelect">
                                <option value="" data-cityzh="" >全部</option>
                                <option value="Beijing" data-cityzh="北京" >北京</option>
                                <option value="Tianjin" data-cityzh="天津">天津</option>
                                <option value="Heilongjiang" data-cityzh="黑龙江">黑龙江</option>
                                <option value="Jilin" data-cityzh="吉林" >吉林</option>
                                <option value="Liaoning" data-cityzh="辽宁" >辽宁</option>
                                <option value="Neimenggu" data-cityzh="内蒙古" >内蒙古</option>
                                <option value="Hebei" data-cityzh="河北" >河北</option>
                                <option value="Shanxi" data-cityzh="山西" >山西</option>
                                <option value="Shaanxi" data-cityzh="陕西" >陕西</option>
                                <option value="Ningxia" data-cityzh="宁夏" >宁夏</option>
                                <option value="Gansu" data-cityzh="甘肃" >甘肃</option>
                                <option value="Qinghai" data-cityzh="青海" >青海</option>
                                <option value="Xizang" data-cityzh="西藏" >西藏</option>
                                <option value="Xinjiang" data-cityzh="新疆" >新疆</option>
                                <option value="Shandong" data-cityzh="山东" >山东</option>
                                <option value="Henan" data-cityzh="河南" >河南</option>
                                <option value="Jiangsu" data-cityzh="江苏" >江苏</option>
                                <option value="Shanghai" data-cityzh="上海" >上海</option>
                                <option value="Zhejiang" data-cityzh="浙江" >浙江</option>
                                <option value="Anhui" data-cityzh="安徽" >安徽</option>
                                <option value="Hubei" data-cityzh="湖北" >湖北</option>
                                <option value="Jiangxi" data-cityzh="江西" >江西</option>
                                <option value="Fujian" data-cityzh="福建" >福建</option>
                                <option value="Yunnan" data-cityzh="云南" >云南</option>
                                <option value="Sichuan" data-cityzh="四川" >四川</option>
                                <option value="Chongqing" data-cityzh="重庆" >重庆</option>
                                <option value="Guizhou" data-cityzh="贵州" >贵州</option>
                                <option value="Hunan" data-cityzh="湖南" >湖南</option>
                                <option value="Guangxi" data-cityzh="广西" >广西</option>
                                <option value="Guangdong" data-cityzh="广东" >广东</option>
                                <option value="Hainan" data-cityzh="海南" >海南</option>
                            </select>
                             <input type="hidden" name="cityzh" value="">
              </div>
            </div>  
            <div class="layui-form-item">
              <label class="layui-form-label">选择产品</label>
              <div class="layui-input-block">
                  <select name="pid" lay-verify="required">
                    <option value="" >全部</option>
                        {{#each list}}
                        <option value="{{this._id}}" >{{this.title}}</option>
                        {{/each}}
                </select>
              </div>
            </div>
           
           <div class="layui-form-item">
                <label class="layui-form-label">序列号</label>
                <div class="layui-input-block">
                    <input type="text" name="sequence" value="" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
             <div class="layui-form-item">
                <label class="layui-form-label">安装数量</label>
                <div class="layui-input-block">
                    <input type="number" name="count" value="1" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
             <div class="layui-form-item">
                <label class="layui-form-label">医院中文名称</label>
                <div class="layui-input-block">
                    <input type="text" name="hospital" value="" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">医院英文名称</label>
                <div class="layui-input-block">
                    <input type="text" name="hospitalen" value="" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
             <div class="layui-form-item">
                <label class="layui-form-label">安装日期</label>
                <div class="layui-input-block">
                    <input type="text" name="date" value="" lay-verify="required" readonly placeholder="请选择" id="ID-laydate-demo" autocomplete="off" class="layui-input">
                </div>
            </div>
          
            <div class="layui-form-item">
              <div class="layui-input-block">
               
                <button type="button" class="layui-btn" lay-submit lay-filter="saveBtn">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </form>
    </script>
<!--JS引用-->
<script src="../views/jquery.min.js"></script>
<script src="../views/layui/layui.js"></script>

<script>
    function  getOpenWidthHeight () {
            var clienWidth = $(".layui-body").width();
            var clientHeight = $(".layui-body").height();
            var offsetLeft = $(".layui-body").offset().left;
            var offsetTop = $(".layui-body").offset().top;
            return [clienWidth, clientHeight, offsetTop, offsetLeft];
     }
    layui.use(['form','layer','table','element'], function() {
        var element = layui.element;
         element.render('nav');
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var weidiantable =  table.render({
            elem: '#test'
            ,id:'test'
            ,maxHeight:'720px' 
            ,toolbar: '#toolbarDemo'
            ,defaultToolbar: ['filter', 'exports', 'print']   
            , url: "http://127.0.0.1:3000/getcity" //数据接口
            ,page: true //开启分页
            ,limit: 15
            ,limits:[15,100, 1000, 10000, 100000]
            ,cols: [[ //表头
                {field: 'city', title: '城市'}
                ,{field: 'pname', title: '产品'}
                ,{field: 'sequence', title: '序列号'}
                ,{field: 'count', title: '数量'}
                ,{field: 'hospital', title: '医院'}
                ,{field: 'date', title: '安装日期'}
                ,{title: '操作', minWidth: 150,  templet:function (d) {
                    let str = '<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">修改</a>'
                   
                    return str

                }, align: "center"}

            ]]
        });
        table.on('toolbar(test)', function (obj) {
           
           
            if (obj.event === 'add') {   // 监听添加操作
              
                var openWH = getOpenWidthHeight();

                var index = layer.open({
                    title: '添加城市数据',
                    type: 1,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: [openWH[0] + 'px', openWH[1] + 'px'],
                    offset: [openWH[2] + 'px', openWH[3] + 'px'],
                    content: $("#content").html(),
                    success:function(){
                       form.render()
                       laydate.render({
                            elem: '#ID-laydate-demo',
                            format: 'yyyy/MM/dd'
                        });
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } 
        });
        
        //监听城市选择
        form.on('select(city)', function(data){
          
               var selectedAttr = $('#citySelect').find("option:selected").attr('data-cityzh');
               $("input[name='cityzh']").val(selectedAttr)
              
        });
        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = data.field;
            console.log(result);
            //执行搜索重载
            table.reload('test', {
                page: {
                    curr: 1
                }
                , where: {
                    pid: result.pid,
                    city:result.city
                }
            }, 'data');

            return false;
        });
        $("#reloadTest").click(function(){
            console.log("#reloadTest")
           window.location.href=""
        })
    })
  
       

</script>

</body>
</html>